<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
    1. 条件渲染指令
    v-if
    v-else
    v-show
    2. 比较v-if与v-show
    如果需要频繁切换 v-show 较好
    -->
    <!--模板中读数据找的都是vm-->
    <div id="demo">
        <p v-if='ok'>表白成功</p>
        <p v-else>表白失败</p>


        <p v-show='ok'>求婚成功</p>
        <p v-show='!ok'>求婚失败</p>

        <button @click='ok=!ok'>切换</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data() {
                return {
                    ok:true
                }
            },
        })
    </script>
</body>
</html>